<template>
  <div class="bar">
    <a-row :gutter="[8, 8]">
      <a-col :span="4">
        <div class="itemWrap">
          <div class="label"><span>时间选择</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-range-picker v-model="rangeTime" @change="onTimeChange" />
          </div>
        </div>
      </a-col>

      <a-col :span="4">
        <div class="itemWrap">
          <div class="label"><span>关键字</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input v-model="search.keyWord" allow-clear />
          </div>
        </div>
      </a-col>

      <a-col :span="4" v-show="expand">
        <div class="itemWrap">
          <div class="label"><span>所属片区</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-select
              v-model="search.ownDistrict"
              style="width: 100%;"
              :options="ownDistrictLists"
            >
            </a-select>
          </div>
        </div>
      </a-col>

      <a-col :span="4" v-show="expand">
        <div class="itemWrap">
          <div class="label"><span>任务类别</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-select
              v-model="search.taskType"
              style="width: 100%;"
              :options="taskTypeLists"
            >
            </a-select>
          </div>
        </div>
      </a-col>

      <a-col :span="4" v-show="expand">
        <div class="itemWrap">
          <div class="label"><span>故障类型</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-select
              v-model="search.impedimentType"
              style="width: 100%;"
              :options="impedimentTypeLists"
            >
            </a-select>
          </div>
        </div>
      </a-col>

      <a-col :span="4" v-show="expand">
        <div class="itemWrap">
          <div class="label">
            <span>现场<br />工程师</span>
          </div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input v-model="search.fieldEngineer" allow-clear />
          </div>
        </div>
      </a-col>

      <a-col :span="4" v-show="expand">
        <div class="itemWrap">
          <div class="label">
            <span>故障件<br />编号</span>
          </div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input v-model="search.faultyPartsNumber" allow-clear />
          </div>
        </div>
      </a-col>

      <a-col :span="4" v-show="expand">
        <div class="itemWrap">
          <div class="label">
            <span>故障件<br />型号</span>
          </div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input v-model="search.faultyPartsType" allow-clear />
          </div>
        </div>
      </a-col>

      <a-col :span="4" v-show="expand">
        <div class="itemWrap">
          <div class="label"><span>机床厂家</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input v-model="search.macFactory" allow-clear />
          </div>
        </div>
      </a-col>

      <a-col :span="4" v-show="expand">
        <div class="itemWrap">
          <div class="label"><span>系统型号</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input v-model="search.ncSystemType" allow-clear />
          </div>
        </div>
      </a-col>

      <a-col :span="4" v-show="expand">
        <div class="itemWrap">
          <div class="label"><span>系统SN号</span></div>
          <div class="separator"><span>:</span></div>
          <div class="content">
            <a-input v-model="search.macSn" allow-clear />
          </div>
        </div>
      </a-col>

      <a-col :span="4">
        <a-button type="primary" style="margin-right: 8px;" @click="expandForm">
          <a-icon :type="expand ? 'left' : 'right'" />
        </a-button>
        <a-button
          type="primary"
          style="margin-right: 8px;"
          @click="searchData()"
        >
          搜索
        </a-button>
        <a-button type="primary" @click="restSearchData">
          重置
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import api from "@/server/userConfig";
import { TaskType, ImpedimentType } from "@/unit/constantValue";

export default {
  name: "ServiceStatistics",
  components: {},
  props: {
    initData: Object
  },
  data() {
    let { startTime, endTime } = this.initData;
    return {
      expand: false,
      ownDistrictLists: [],
      taskTypeLists: [],
      impedimentTypeLists: [],
      rangeTime: [],
      search: {
        startTime: "",
        endTime: "",
        keyWord: "",
        ownDistrict: "",
        taskType: "",
        impedimentType: "",
        fieldEngineer: "",
        faultyPartsNumber: "",
        faultyPartsType: "",
        macFactory: "",
        ncSystemType: "",
        macSn: ""
      },
      defaultSearchData: ""
    };
  },
  methods: {
    async findSecondDepartment(parames, key) {
      const res = await api.findSecondDepartment({
        primaryDepartment: parames.department
      });
      console.log(res);

      if (res.success == false) {
        return;
      }

      let optionLists = buildSelectOption(res.data);
      this[key] = optionLists;
      this.search.ownDistrict = optionLists[0].value;

      function buildSelectOption(lists) {
        let _lists = [];
        lists.unshift({ department: "全部" });
        _lists = lists.map((item, index) => {
          return {
            label: item.department,
            value: item.department
          };
        });
        return _lists;
      }
    },

    buildTypeLists() {
      this.taskTypeLists = TaskType;
      this.search.taskType = TaskType[0].value;
      this.impedimentTypeLists = ImpedimentType;
      this.search.impedimentType = ImpedimentType[0].value;
    },

    buildDefaultData() {
      this.defaultSearchData = Object.assign({}, this.search);
    },

    onTimeChange(e) {
      let [startTime, endTime] = e;
      if (e.length > 0) {
        this.search.startTime = `${this.$Moment(startTime).format(
          "YYYY-MM-DD"
        )} 00:00:00`;
        this.search.endTime = `${this.$Moment(endTime).format(
          "YYYY-MM-DD"
        )} 23:59:59`;
      } else {
        this.search.startTime = "";
        this.search.endTime = "";
      }
    },

    expandForm() {
      this.expand = !this.expand;
    },
    searchData() {
      this.$emit("emitSearchData", {
        ...this.search
      });
    },
    restSearchData() {
      // let data = this.search;
      // for (let key in data) {
      //   if (Object.hasOwnProperty.call(data, key)) {
      //     data[key] = "";
      //   }
      // }
      this.rangeTime = [];
      this.search = Object.assign({}, this.defaultSearchData);
    }
  },
  created() {},
  async mounted() {
    this.buildTypeLists();
    await this.findSecondDepartment(
      { department: "客户服务部" },
      "ownDistrictLists"
    );
    this.buildDefaultData();
  },
  computed: {}
};
</script>

<style scoped="scoped">
.bar {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  padding: 16px 0px 16px 16px;
}

.itemWrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
}

.itemWrap > .label {
  min-width: 76px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #373737;
  text-align: right;
}

.itemWrap > .separator {
  padding: 0px 4px;
}

.itemWrap > .content {
  width: 100%;
  padding: 0px 1px;
}
</style>
